<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.box{
		width: 50PX; height: 50PX; background: #cccccc; margin: 10px auto;
	}
</style>
<!-- 1<div class="box" onclick="change(this)">
	小 -->
	
	<!-- 2<div class="box" id="box1">
		小 -->
		
		<div class="box">小</div></br>
		<div class="box">小</div></br>
		<div class="box">小</div></br>
		<div class="box">小</div></br>
		<div class="box">小</div>
		
</head>
<body>
	<script>
		//传入参数 box 本身
		//1 function change(event){
		// function change(box){
		// 	box.style.width="100px";//改变上面的box参数
		// 	box.style.height="100px";
		// 	box.style.innerHTML="大";//改变字体大小？
			
		// }
		
		//2 var box1=document.getElementById('box1');
		// console.log(box1);
		
		//3 var box1=document.getElementById('box1');
		// box1.onclick=function(){
		// 	this.style.width="100px";
		// 	this.style.height="100px";
		// 	this.style.innerHTML="大";
		// }
		
		//获取数组 元素
		var boxs=document.getElementsByClassName('box');
		//console.log(boxs)
		for(var i in boxs){
			//添加点击事件
			boxs[0].onclick=function(){
				boxs[0].style.width="100px";
				boxs[0].style.height="100px";
				boxs[0].style.innerHTML="大";
		};
		// //添加点击事件
		// boxs[0].onclick=function(){
		// 	boxs[0].style.width="100px";
		// 	boxs[0].style.height="100px";
		// 	boxs[0].style.innerHTML="大";
			boxs[1].onclick=function(){
				boxs[1].style.width="100px";
				boxs[1].style.height="100px";
				boxs[1].innerHTML="大";
		};
		
		boxs[2].onclick=function(){
				boxs[2].style.width="100px";
				boxs[2].style.height="100px";
				boxs[2].innerHTML="大";
		};
		boxs[3].onclick=function(){
				boxs[3].style.width="100px";
				boxs[3].style.height="100px";
				boxs[3].innerHTML="大";
		};
		boxs[4].onclick=function(){
				boxs[4].style.width="100px";
				boxs[4].style.height="100px";
				boxs[4].innerHTML="大";
		};
	}
	</script>
</body>
</html>
